/*
 * Copyright © 2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import '~styles/variables.scss';

$bg-color: white;
$font-color: $grey-01;

// For some reason, the way Popper.js position the tooltip differs
// in Angular vs React. So this block of code is to remove the margin
// from react components.
body:not(.theme-cdap) .guided-tour-tooltip.shepherd-element {
  &[x-placement^="bottom"] {
    margin-top: 0;
  }
}

.guided-tour-tooltip.shepherd-element {
  z-index: 1301; // Must be > z-index of navbar(drawer) in components/ThemeWrapper
  max-width: 600px;
  border-radius: 4px;

  .shepherd-buttons .shepherd-button.btn-primary {
    color: white;
  }
  &[x-placement^="right"] {
    .popper__arrow {
      border-right-color: white;
    }
  }

  &[x-placement^="bottom"] {
    .popper__arrow {
      border-bottom-color: white;
    }
  }

  &.shepherd-has-title {
    .shepherd-content {
      header {
        background-color: $bg-color;

        h3 {
          font-size: 22px;
        }
      }
    }
  }

  .shepherd-content {
    header .shepherd-cancel-link {
      color: $font-color;
      opacity: 1;
      font-size: 1.5em;
    }

    .shepherd-text {
      height: 310px;

      p:last-child:not(:only-child) {
        margin-top: 20px;
      }
    }
  }

  footer {
    border-top: none;
  }
}
